<template>
  <h-container>
    <div class="alert alert-danger">
      注意：请根据实际情况维护您的个人信息好保证您正常的接收相关信息物品
    </div>

    <div>
      <el-button type="primary" @click="changePassword"><i class="fa fa-lock"></i> 修改密码</el-button>
    </div>
    <hr/>
    <div>
      <fieldset>
        <legend>联系地址列表:
          <el-button type="primary" @click="newAddress"> 添加新地址</el-button>
        </legend>
        <el-table
          :data="addresses"
          border
          tooltip-effect="dark"
          v-loading="loading"
        >
          <el-table-column
            label="#" min-width="60"
          >
            <template slot-scope="scope">{{ scope.$index+1 }}</template>
          </el-table-column>
          <el-table-column
            label="联系人" prop="concat">
          </el-table-column>
          <el-table-column label="联系电话" prop="mobile">
          </el-table-column>
          <el-table-column label="区域地址" prop="district">
          </el-table-column>
          <el-table-column label="详细地址" prop="address">
          </el-table-column>
          <el-table-column label="邮政编码" prop="zipcode"></el-table-column>
          <el-table-column label="操作" width="170px" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.isDefault==0" type="text" @click="defaultAction(scope.$index,scope.row)">
                设为默认
              </el-button>
              <el-button v-if="scope.row.isDefault==0" @click="deleteAction(scope.$index,scope.row)" type="text">
                <span class="red"> 删除</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </fieldset>
    </div>
    <h-address-dialog v-model="currentAddress" :show.sync="addressDialogShow" title="添加联系地址" @success="updateAddress"/>
    <h-change-password-dialog :show.sync="changePasswordShow" title="修改密码"></h-change-password-dialog>
  </h-container>
</template>
<script>
  import HContainer from 'src/components/shop/layout/Container'
  import HAddressDialog from 'src/components/shop/common/HAddressDialog'
  import FrontService from 'src/service/front'
  import HChangePasswordDialog from 'src/components/shop/common/HChangePasswordDialog'

  export default {
    name: 'FrontMain',
    components: {HContainer, HAddressDialog, HChangePasswordDialog},
    data() {
      return {
        search: {
          pagination: {
            total: 0,
            page: 1,
            limit: 20
          }
        },
        currentAddress: {},
        loading: false,
        addressDialogShow: false,
        addresses: [],
        changePasswordShow: false
      }
    },

    methods: {
      changePassword: function () {
        this.changePasswordShow = true;
      },
      defaultAction: function (index, data) {
        const me = this
        me.$confirm('此操作将该条数据作为默认收货地址, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          FrontService.defaultAddress(data.id).then(
            d => {
              if (d != null) {
                me.$message.success('更新默认地址成功.')
                me.getAddress()
              } else {
                me.$message.error('更新默认地址失败!')
              }
            }
          )
        })
      },
      deleteAction: function (index, data) {
        const me = this
        me.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          FrontService.deleteAddress(data.id).then(ds => {
            if (ds != null) {
              me.$message.success('删除地址成功.')
              me.addresses.splice(index, 1)
            } else {
              me.$message.error('删除地址失败!')
            }
          })
        })
      },
      newAddress: function () {
        this.currentAddress = {
          name: '',
          address: '',
          districtIds: [],
          mobile: '',
          district: '',
          zipcode: ''
        }
        this.addressDialogShow = true
      },
      updateAddress: function (data) {
        this.addressDialogShow = false
        this.addresses.push(data)
      },
      getDatas: function () {

      },
      getAddress: function () {
        const me = this
        FrontService.userAddresses().then(ds => {
          if (ds != null) {
            me.addresses = ds.datas
          }
        })

      },
      searchData: function () {

      }
    },
    mounted: function () {
      this.getAddress()
    }
  }


</script>
